<template>
  <div class="work-orders">
    <el-card class="header-card">
      <div class="page-header">
        <div class="header-left">
          <h2>
            <el-icon><Tickets /></el-icon>
            工单管理
          </h2>
          <p>管理生产工单，跟踪工单执行状态</p>
        </div>
        <div class="header-right">
          <el-button type="primary" @click="showAddDialog">
            <el-icon><Plus /></el-icon>
            新建工单
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 搜索筛选 -->
    <el-card class="filter-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="工单编号">
          <el-input v-model="searchForm.workOrderNo" placeholder="请输入工单编号" clearable />
        </el-form-item>
        <el-form-item label="工单状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="未开始" value="notStarted" />
            <el-option label="进行中" value="inProgress" />
            <el-option label="已完成" value="completed" />
            <el-option label="已暂停" value="paused" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <el-table :data="tableData" stripe border v-loading="loading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="workOrderNo" label="工单编号" width="160" fixed />
        <el-table-column prop="productName" label="产品名称" width="180" />
        <el-table-column prop="orderNo" label="关联订单" width="160" />
        <el-table-column prop="quantity" label="生产数量" width="120" align="right">
          <template #default="{ row }">
            <el-tag>{{ row.quantity }} {{ row.unit }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="completedQty" label="完成数量" width="120" align="right">
          <template #default="{ row }">
            {{ row.completedQty }} {{ row.unit }}
          </template>
        </el-table-column>
        <el-table-column prop="progress" label="完成进度" width="150">
          <template #default="{ row }">
            <el-progress :percentage="row.progress" />
          </template>
        </el-table-column>
        <el-table-column prop="workshopName" label="生产车间" width="120" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="planStartTime" label="计划开始" width="160" />
        <el-table-column label="操作" width="240" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleView(row)">查看</el-button>
            <el-button link type="success" size="small" @click="handleStart(row)" v-if="row.status === 'notStarted'">开始</el-button>
            <el-button link type="warning" size="small" @click="handlePause(row)" v-if="row.status === 'inProgress'">暂停</el-button>
            <el-button link type="primary" size="small" @click="handleReport(row)" v-if="row.status === 'inProgress'">报工</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        class="pagination"
      />
    </el-card>

    <!-- 报工对话框 -->
    <el-dialog v-model="reportVisible" title="生产报工" width="600px">
      <el-form :model="reportForm" label-width="120px">
        <el-form-item label="工单编号">
          <el-input v-model="reportForm.workOrderNo" disabled />
        </el-form-item>
        <el-form-item label="完成数量">
          <el-input-number v-model="reportForm.completedQty" :min="1" style="width: 100%" />
        </el-form-item>
        <el-form-item label="合格数量">
          <el-input-number v-model="reportForm.qualifiedQty" :min="0" style="width: 100%" />
        </el-form-item>
        <el-form-item label="报废数量">
          <el-input-number v-model="reportForm.scrapQty" :min="0" style="width: 100%" />
        </el-form-item>
        <el-form-item label="报工人">
          <el-input v-model="reportForm.reporter" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="reportForm.remark" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="reportVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReport">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Tickets, Plus, Search } from '@element-plus/icons-vue'

const searchForm = reactive({
  workOrderNo: '',
  status: ''
})

const tableData = ref([])
const loading = ref(false)

const pagination = reactive({
  page: 1,
  size: 10,
  total: 0
})

const reportVisible = ref(false)
const reportForm = reactive({
  workOrderNo: '',
  completedQty: 0,
  qualifiedQty: 0,
  scrapQty: 0,
  reporter: '',
  remark: ''
})

const fetchData = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = [
      {
        id: '1',
        workOrderNo: 'WO202501001',
        productName: '产品A',
        orderNo: 'MO202501001',
        quantity: 500,
        completedQty: 325,
        progress: 65,
        unit: '件',
        workshopName: '第一车间',
        status: 'inProgress',
        planStartTime: '2025-01-10 08:00:00'
      },
      {
        id: '2',
        workOrderNo: 'WO202501002',
        productName: '产品B',
        orderNo: 'MO202501002',
        quantity: 300,
        completedQty: 0,
        progress: 0,
        unit: '件',
        workshopName: '第二车间',
        status: 'notStarted',
        planStartTime: '2025-01-12 08:00:00'
      }
    ]
    pagination.total = 2
    loading.value = false
  }, 500)
}

const getStatusType = (status) => {
  const types = {
    notStarted: 'info',
    inProgress: 'primary',
    completed: 'success',
    paused: 'warning'
  }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = {
    notStarted: '未开始',
    inProgress: '进行中',
    completed: '已完成',
    paused: '已暂停'
  }
  return texts[status] || status
}

const handleSearch = () => {
  pagination.page = 1
  fetchData()
}

const handleReset = () => {
  Object.assign(searchForm, { workOrderNo: '', status: '' })
  handleSearch()
}

const handleSizeChange = (size) => {
  pagination.size = size
  fetchData()
}

const handlePageChange = (page) => {
  pagination.page = page
  fetchData()
}

const showAddDialog = () => {
  ElMessage.info('新建工单')
}

const handleView = (row) => {
  ElMessage.info('查看工单：' + row.workOrderNo)
}

const handleStart = (row) => {
  ElMessageBox.confirm('确定开始该工单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('已开始')
    fetchData()
  })
}

const handlePause = (row) => {
  ElMessageBox.confirm('确定暂停该工单吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('已暂停')
    fetchData()
  })
}

const handleReport = (row) => {
  Object.assign(reportForm, {
    workOrderNo: row.workOrderNo,
    completedQty: 0,
    qualifiedQty: 0,
    scrapQty: 0,
    reporter: '张三',
    remark: ''
  })
  reportVisible.value = true
}

const submitReport = () => {
  ElMessage.success('报工成功')
  reportVisible.value = false
  fetchData()
}

onMounted(() => {
  fetchData()
})
</script>

<style scoped lang="scss">
.work-orders {
  padding: 20px;

  .header-card {
    margin-bottom: 20px;
    
    .page-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-left {
        h2 {
          display: flex;
          align-items: center;
          gap: 10px;
          margin: 0 0 10px 0;
          font-size: 24px;
          color: #303133;
        }

        p {
          margin: 0;
          color: #909399;
          font-size: 14px;
        }
      }
    }
  }

  .filter-card {
    margin-bottom: 20px;
  }

  .table-card {
    .pagination {
      margin-top: 20px;
      justify-content: flex-end;
    }
  }
}
</style>

